/*
 * @Author: Zhijie Luo
 * @LastEditors: Zhijie Luo
 * @Date: 2021-09-25 12:04:26
 * @LastEditTime: 2021-09-26 17:39:01
 * @Description: 
 */
'use strict' //严格模式
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 单个入口
// const path = require('path'); // 指定路径
// module.exports = {
//     entry: "./src/index.js",
//     output: {
//         path: path.join(__dirname, 'dist'), // c出口 输出的文件夹名
//         filename: 'bundle.js' //输出的文件名
//     },
//     mode: 'production'
// }

// 多个入口

const path = require('path'); // 指定路径

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'), // c出口 输出的文件夹名
        filename: '[name]_[hash:8].js' //输出的文件名,多文件的话用占位符
    },
    mode: 'production', // 指定当前的构建环境 production development
    module: {
        rules: [
            // {
            //     test: /\.txt$/, // test : 指定匹配规则
            //     use: 'raw-loader' // 指定使用的 loader 名称
            // },
            {
                test: /.js$/,
                use: 'babel-loader' // 指定
            },
            {
                test: /.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            // {
            //     test: /.(png|jpg|jpeg|gif)$/,
            //     use: 'file-loader' //也是可以解析字体
            // }
            {
                test: /.(png|jpg|jpeg|gif)$/,
                use: [
                    // {
                    //     loader: 'url-loader',
                    //     options: {  // 限制 ：小于10k 的时候 自动转化为base 64
                    //         limit: 10240
                    //     }
                    // }
                    {
                        loader: 'file-loader',
                        options: {  // 限制 ：小于10k 的时候 自动转化为base 64
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[hash:8].css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano')
        }),
        //一份文件入口对应一个 HtmlWebpackPlugin
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/search.html'), // html模版所在位置
            filename: 'search.html',// 指定打包出来的html文件名称
            chunks: ['search'], // 指定生成的html 需要哪些chunks
            inject: true, // js自动注入html
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'), // html模版所在位置
            filename: 'index.html',// 指定打包出来的html文件名称
            chunks: ['index'], // 指定生成的html 需要哪些chunks
            inject: true, // js自动注入html
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        })
    ]
};


